@if (form) {
  @for (groupedProp of groupedPropList.items; track i; let i = $index; let first = $first) {
    <ng-container *abpPropData="let data; fromList: groupedProp.formPropList; withRecord: record">
      @if (isAnyGroupMemberVisible(i, data) && groupedProp.group?.className) {
        <div
          [ngClass]="groupedProp.group?.className"
          [attr.data-name]="groupedProp.group?.name || groupedProp.group?.className"
        >
          <ng-container
            [ngTemplateOutlet]="propListTemplate"
            [ngTemplateOutletContext]="{ groupedProp: groupedProp, data: data, isFirstGroup: first}"
          >
          </ng-container>
        </div>
      } @else {
        <ng-container
          [ngTemplateOutlet]="propListTemplate"
          [ngTemplateOutletContext]="{ groupedProp: groupedProp, data: data, isFirstGroup: first }"
        >
        </ng-container>
      }
    </ng-container>
  }
}

<ng-template let-groupedProp="groupedProp" let-data="data" let-isFirstGroup="isFirstGroup" #propListTemplate>
  @for (prop of groupedProp.formPropList; let index = $index; let first = $first; track prop.name) {
    @if (prop.visible(data)) {
      @if (extraProperties.controls[prop.name]) {
        <ng-container [formGroupName]="extraPropertiesKey">
          <abp-extensible-form-prop [prop]="prop" [data]="data" [class]="prop.className" />
        </ng-container>
      } @else {
        @if (form.get(prop.name)) {
          <abp-extensible-form-prop
            [class]="prop.className"
            [prop]="prop"
            [data]="data"
            [first]="first"
            [isFirstGroup]="isFirstGroup"
          />
        }
      }
    }
  }
</ng-template>
